<template>
  <nav>
    <ul class="flex w-full space-x-4 justify-center">
      <li class="nav-router" v-for="route in routes" :key="route.name">
        <router-link class="nav-router__link" :to="route.path">{{ route.name }}</router-link>
        <ul class="nav-router__children-list" v-if="route.children">
          <li
            class="nav-router__children"
            v-for="childRoute in route.children"
            :key="childRoute.name"
          >
            <router-link class="nav-router-children__link" :to="childRoute.path">{{
              childRoute.name
            }}</router-link>
            <ul class="nav-router__grand-children" v-if="childRoute.children">
              <li v-for="grandchildRoute in childRoute.children" :key="grandchildRoute.name">
                <router-link class="nav-router-children__link" :to="grandchildRoute.path">{{
                  grandchildRoute.name
                }}</router-link>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const routes = ref([
  { name: 'Home', path: '/' },
  {
    name: 'Categories',
    path: '/categories',
    children: [
      {
        name: 'Shoes',
        path: '/categories/shoes',
        children: [
          { name: 'Sneakers', path: '/sneakers' },
          { name: 'Sandals', path: '/sandals' }
        ]
      },
      {
        name: 'Shirts',
        path: '/categories/shirts',
        children: [
          { name: 'T-Shirts', path: '/product/t-shirts' },
          { name: 'Dress Shirts', path: '/product/dress-shirts' }
        ]
      },
      {
        name: 'Pants',
        path: '/categories/pants',
        children: [
          { name: 'Jeans', path: '/product/jeans' },
          { name: 'Dress Pants', path: '/product/dress-pants' }
        ]
      }
    ]
  }
])
</script>

<style scoped>
.nav-router {
  @apply relative;
}

.nav-router__link {
  @apply inline-block px-4 py-2 text-black w-full h-full border-t-2 border-t-transparent;
}

.nav-router__link.router-link-active,
.nav-router__link:hover {
  @apply border-t-slate-400;
}

.nav-router__children-list {
  @apply shadow-sm absolute left-0 right-0 top-10 hidden w-60 h-auto bg-slate-300 rounded-md;
}
.nav-router:hover > .nav-router__children-list {
  @apply block;
}
.nav-router__grand-children {
  @apply shadow-sm absolute left-60 top-0 hidden w-60 h-auto bg-slate-400 rounded-md;
}

.nav-router-children__link {
  @apply inline-block px-4 py-2 text-black w-full h-full rounded-md;
}
.nav-router-children__link.router-link-active,
.nav-router-children__link:hover {
  @apply bg-slate-600 transition-colors text-white;
}

.nav-router__children:hover > .nav-router__grand-children {
  @apply block;
}
</style>
